﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <title></title>
        <link rel="stylesheet" href="jquery.mobile-1.3.0/jquery.mobile-1.3.0.css" />
        <link rel="stylesheet" href="css/style.css" />
        <script src="jquery/jquery-1.7.2.js"></script>
        <script src="jquery.mobile-1.3.0/jquery.mobile-1.3.0.js"></script>
        <script src="my.js"></script>
        <!-- User-generated css -->
        <style>
			#login {
				background: url(images/login_bg.png);
			}
			#login .ui-content {
				background: url(images/login_bg.png);
				padding: 0;
				
			}
			#login #center{
				margin-left: 5px; 
				margin-right : 5px;
				border-radius: 7px;
				background: none repeat scroll 0 0 #F1F2F4;
				height: 380px;
				margin-top: -190px;
				width: 98%;
				position: absolute;
				top: 50%;
				margin-left: 14px;
				width : 94%
			}
			#login h2{
				font-size : 30px;
				font-weight: bold;
				text-align: center;
				margin-top : 50px;
			}
			#login p{
				color: #4BBCA9;
				font-weight: bold;
				text-align: center;
				padding : 0;
				margin-bottom: 26px;
				margin-top: -15px;
				margin-left: 6px; 
				margin-right : 6px;
				font-size : 18px;
				margin-top: -25px;
			}
			
			#login #form-input{
				border: 1px solid #B4B5B7;
				border-radius: 3px;
				margin: auto;
				width: 80%;
				background: #E6E7E9;
			}
			#login  .ui-field-contain{
				height: 38px;
				border-radius: none !important;
			}
			#login #username{
				border-radius: none;
			}
			#login #password{
				border-radius: none;
			}
			#login .ui-input-text{
				box-shadow: none;
				border-radius: none !important;
				height: 21px;
				margin-bottom: 0;
				padding: 0;
				background: #E6E7E9;
				border: none;
				height : 50px;
				width: 80%;
				float : right;
				margin-top : -7px;
			}
			#login .ui-btn{
				width: 55px;
			}
			
			#login .ui-btn .ui-btn-text{
				font-size : 26pt;
			}
			#login .ui-input-text input{
				height: 105%;
				margin: 0;
				padding: 0;
				position: absolute;
				width: 92%;
				font-size : 26pt;
			}
			#login hr {
				color: #E6E7E9;
			}
			#login #btn-login{
				height : 65px;
				border-radius: 10px 10px 10px 10px;
				margin-top : 20px !important;
				font-size : 20px;
				border: 1px solid #3E9789;;
				border-radius: 7px;
				margin: auto;
				width: 80%;
				background: #52C0B0;
			}
			#login #form-input img{
				margin-left: 15px;
			}
			#login #clip{
				width : auto;
			}
			#login #clip img{
				left: 50%;
				margin-left: -48px;
				margin-top: -81px;
				z-index : 1;
				position: absolute;
			}
		</style>
        <!-- User-generated js -->
    </head>
    <body>
        <!-- Home -->
        <div data-role="page" id="login">
            <div data-role="content">
				<div id="center">
					<div id="clip">
						<img src="images/login_clip.png"/>
					</div>
					<h2>Welcom</h2>
					<p>Please Enter your Username and Password</p>
					<div id="form-input">
						<div data-role="fieldcontain" class="ui-hide-label" style="border-bottom: 0px solid rgba(130, 130, 130, 0.3);">
						<img src="images/username_pic.png"/>
						<input type="text" name="username" id="username" value=""/>
						</div>
						<hr>
						<div data-role="fieldcontain" class="ui-hide-label" style="border-bottom: 0px solid rgba(130, 130, 130, 0.3);">
							<img src="images/password_pic.png"/>
							<input type="password" name="password" id="password" value=""/>
						</div>
					</div>
					<a href="#" data-role="button" data-theme="b" id="btn-login">Login</a>
				</div>
            </div>
        </div>
    </body>
</html>
